<template>
    <el-container style="height: 100%;">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '2']" router>
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-h-set2"></i>基础信息</template>
                    <el-menu-item index="/index">基本资料</el-menu-item>
                    <el-menu-item index="/accountMessage">账户资料</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-h-kaidan"></i>消费信息</template>
                    <el-menu-item index="/guestLog">消费记录</el-menu-item>
                    <el-menu-item index="/other">其他信息</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-main style="background-color: #fff">
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
        }
    },
    methods: {},
    computed: {},
    mounted: async function() {
    }
}
</script>
<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity .1s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

{
    opacity: 0;
}
</style>